<template>
  <div class="carload-box">
    <el-form :inline="true"
             class="demo-form-inline"
             @submit.native.prevent>
      <el-form-item v-if="isSearch"
                    label="城市">
        <el-input v-model="address"
                  placeholder="城市"></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          按<span class="label">{{label}}</span>计费（变量X=<span class="label">{{ label }}</span>）
        </div>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <!-- <VirtualScroll ref="virtualScroll"
                     :data="tableData"
                     :item-size="62"
                     scroll-box=".table-container"
                     key-prop="code"
                     @change="(renderData) => list = renderData"> -->
      <el-table :data="tableData.filter(data => !address || (data.fromCity + data.toCity).includes(address))"
                :max-height="400"
                class="el-table"
                :row-class-name="tableRowClassName"
                :row-style="{ height: '50px' }"
                :cell-style="{ padding: '0px' }"
                row-key="code"
                border>
        <template v-for="(item, index) in columns">
          <Address :key="index"
                   :item="item"
                   :index="index" />
          <!-- <el-table-column v-if="item.isFromAddress"
                             :key="index"
                             align="center"
                             :label="item.label"
                             :width="item.width">
              <template slot-scope="scope">
                <div>{{ scope.row.fromCity }}</div>
                <div>{{ scope.row.startAddress || scope.row.fromAddress.address }}</div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.isToAddress"
                             :key="index"
                             align="center"
                             :label="item.label"
                             :width="item.width">
              <template slot-scope="scope">
                <div>{{ scope.row.toCity }}</div>
                <div>{{ scope.row.endAddress || scope.row.toAddress.address}}</div>
              </template>
            </el-table-column>
            <el-table-column v-else
                             :key="index"
                             :prop="item.prop"
                             align="center"
                             :label="item.label"
                             :width="item.width">
            </el-table-column> -->
        </template>
        <el-table-column v-if="hidden"
                         fixed="right"
                         align="center"
                         label="操作"
                         width="100">
          <template slot-scope="scope">
            <div v-if="separateBarga">
              <el-button v-if="scope.row.bargain"
                         type="text"
                         size="small"
                         @click="merge(scope.$index, scope.row)">采纳</el-button>
              <el-button v-if="scope.row.edit"
                         type="text"
                         size="small"
                         @click="bargainEdit(scope.$index, scope.row)">编辑</el-button>
            </div>
            <div v-else>
              <el-button v-if="!rejectedStatus && status && !scope.row.locaBargain"
                         type="text"
                         size="small"
                         @click="bargain(scope.$index, scope.row)">议价</el-button>
              <el-button v-if="rejectedStatus || !status || scope.row.edit"
                         type="text"
                         size="small"
                         @click="edit(scope.$index, scope.row)">编辑</el-button>
              <el-button v-if="rejectedStatus || !status || scope.row.locaBargain"
                         type="text"
                         size="small"
                         @click="clear(scope.$index, scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- </VirtualScroll> -->
    </div>
  </div>
</template>

<script>
import VirtualScroll from '@/views/digitalize/components/ElTableVirtualScroll'
import Address from './components/Address.vue'

export default {
  name: 'Carload',
  components: { VirtualScroll, Address },
  props: {
    status: {
      type: [String, Number],
      default: null
    },
    hidden: {
      type: Boolean,
      default: null
    },
    label: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    bargaDetailsStatus: {
      type: Boolean,
      default: false
    },
    separateBarga: {
      type: Boolean,
      default: null
    },
    isSearch: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      list: [],
      address: '',
      // columns: columns,
    }
  },
  /* 被拒绝状态 */
  computed: {
    rejectedStatus () {
      return Number(this.status) === 3
    }
  },
  watch: {
    separateBarga: {
      handler (val) {
        console.log('separateBarga', val)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    console.log('items底层table===>', this.tableData)
  },
  methods: {
    tableRowClassName ({ row }) {
      if (row.bargain || row.locaBargain) {
        return 'warning-row'
      }
      return
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   const _row = this.tableData[rowIndex - 1]
      //   if (_row && row.fromCity === _row.fromCity) {
      //     return {
      //       rowspan: 0,
      //       colspan: 1
      //     }
      //   } else {
      //     let rowspan = 1
      //     for (let i = rowIndex + 1; i < this.tableData.length; i++) {
      //       if (this.tableData[i].fromCity === row.fromCity) {
      //         rowspan++
      //         console.log('rowspan', rowspan)
      //       } else {
      //         break
      //       }
      //     }
      //     return {
      //       rowspan: rowspan,
      //       colspan: 0
      //     }
      //   }
      // }
    },
    bargain (index, row) {
      this.$emit('bargain', index, row)
    },
    edit (index, row) {
      this.$emit('edit', index, row)
    },
    clear (index, row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('clear', index, row)
      })
    },
    merge (index, row) {
      this.$confirm('此操作将合并数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('merge', index, row)
      })
    },
    bargainEdit (index, row) {
      this.$emit('bargainEdit', index, row)
    }
  }
}
</script>


<style scoped>
.demo-form-inline {
  display: flex;
  justify-content: space-between;
}
.label {
  color: var(--prev-color-primary);
  font-weight: 700;
}
.main-box {
  height: 100%;
}
.table-container {
  margin-right: 10px;
  max-height: 400px;
  overflow: auto;
  /* border: 1px solid var(--prev-color-primary); */
}
::v-deep.el-table .warning-row td {
  color: rgb(98 189 255);
  background: #f8ecda !important;
  color: var(--prev-color-text-purered);
}
.el-table >>> th.el-table__cell .cell {
  height: 40px !important;
}
</style>